<template>
    <h-section collapse title="产品需求">
        <div :class="['workbench-require-card-item', 'disabled-item']" v-for="item of list" :key="item.id" style="background: #fff">
            <flexbox>
                <flexbox style="flex: 1; overflow: hidden">
                    <a-tag style="flex-shrink: 0; border-radius: 12px; margin-left: 20px; background: #fff" v-if="item.level">
                        <HLevel :level="item.level" />
                    </a-tag>
                    <HProductType :type="$filters.valToNameFilter('requireType', item.requireType)" style="flex-shrink: 0" />
                    <HToolTip :title="item.requireName">
                        <span style="color: #172b4d; margin-left: 4px">{{ item.requireName }}</span>
                    </HToolTip>
                </flexbox>
            </flexbox>
        </div>
    </h-section>
</template>

<script lang="ts">
import { HToolTip, HLevel, HProductType } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HLevel,
        HProductType,
        HToolTip
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        versionDetail: {
            type: Object,
            default: () => ({})
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    emits: ['success'],
    setup() {
        const state = reactive<any>({});
        return {
            ...toRefs(state)
        };
    }
});
</script>

<style scoped lang="less">
@import '../../../LeftSide/styles/common.less';
::v-deep(.ant-badge-status-text) {
    margin-left: 0 !important;
}
</style>